<script lang="ts" setup>
import Account from "../base/AccountStore";
import { useRouter } from "vue-router";
import { PageName } from "../base/Router";
import { GoldMedal } from "@element-plus/icons-vue";

let account = Account();
let router = useRouter();

function selectedItem(item: string) {
  console.log("selected", item);
  router.push(item);
}
function logout() {
  account.logout();
  router.replace({
    name: PageName.login,
  });
}
</script>

<template>
  <el-container id="container">
    <!-- 侧边栏 -->
    <el-aside width="250px">
      <el-container id="top">
        <div
          style="
            margin: auto;
            color: #ffffff;
            font-size: 22px;
            font-weight: bold;
          "
        >
          电商后台管理系统
        </div>
      </el-container>
      <!-- 功能菜单 -->
      <el-menu
        :default-active="$route.path"
        style="height: 100%"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="selectedItem"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><GoldMedal /></el-icon>
            <span>营销与推广</span>
          </template>
          <el-menu-item index="/home/operational">运营位管理</el-menu-item>
          <el-menu-item index="/home/operationaladd">创建位管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Goods /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item index="/home/category">类别管理</el-menu-item>
          <el-menu-item index="/home/goodsmanager">商品管理</el-menu-item>
          <el-menu-item index="/home/goodsedit">编辑商品</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/home/orderManager">订单管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Star /></el-icon>
            <span>评价管理</span>
          </template>
          <el-menu-item index="/home/evaluationManager">评价审核</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon><Files /></el-icon>
            <span>数据统计</span>
          </template>
          <el-menu-item index="/home/statisticalManager">数据统计</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <!-- 主内容区 -->
    <el-main style="padding: 0">
      <!-- 添加一个通用的头部 -->
      <el-header style="margin: 0; padding: 0" height="80px">
        <el-container
          style="
            background-color: blanchedalmond;
            margin: 0;
            padding: 0;
            height: 80px;
          "
        >
          <div style="margin: auto; margin-left: 100px">
            <h1>
              欢迎您登录后台管理系统，<span
                style="font-weight: bold; color: blueviolet"
                >{{ account.$state.info?.username }}</span
              >!
            </h1>
          </div>
          <div style="margin: auto; margin-right: 50px">
            <el-button type="primary" @click="logout">注销</el-button>
          </div>
        </el-container>
      </el-header>
      <!-- 这里用来渲染具体的功能模块组件 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
#container {
  height: 100%;
  width: 100%;
  position: absolute;
}
#top {
  background-color: #545c64;
  margin-right: 1px;
  text-align: center;
  height: 60px;
}
</style>

